 <!-- 
 @Author: LW  
 @Date: 2021-05-19 11:05:36  
 @function:基础信息
 -->
 <template>
  <div>
    <el-form
      label-width="120px"
      ref="editModel"
      :rules="formInfoRules"
      :model="formInfo.baseInfo"
    >
      <el-row>
        <el-col :span="16">
          <el-form-item label="商品名称：" prop="name">
            <el-input
              v-model="formInfo.baseInfo.name"
              size="mini"
              autocomplete="off"
              maxlength="50"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品类型：">
            <Treeselect
              :disable-branch-nodes="true"
              :show-count="true"
              :options="listInfo"
              :normalizer="normalizer"
              v-model="formInfo.baseInfo.category_id"
              placeholder="请选择所属商品类型"
              clearable
            >
            </Treeselect>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="商品标题：" prop="title">
            <el-input
              v-model="formInfo.baseInfo.title"
              size="mini"
              autocomplete="off"
              maxlength="100"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
     <el-row>
        <el-col :span="8">
           <el-form-item label="商品货号：" prop="goods_no">
            <el-input
              v-model="formInfo.baseInfo.goods_no"
              size="mini"
              autocomplete="off"
              maxlength="100"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
           <el-form-item label="售卖单价：">
            <el-input
              v-model="formInfo.baseInfo.selling_price"
              size="mini"
              autocomplete="off"
              maxlength="10"
             type="number"
            >
            <template slot="append">(元)</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品原价：">
            <el-input
              v-model="formInfo.baseInfo.original_price"
              size="mini"
              autocomplete="off"
              maxlength="10"
              type="number"
            >
             <template slot="append">(元)</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
            <el-form-item label="是否热卖：">
                <el-radio-group v-model="formInfo.baseInfo.is_hot_style">
                <el-radio label="100">是</el-radio>
                <el-radio label="110">不是</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-col>
        <el-col :span="8">
             <el-form-item label="是否推荐：">
                <el-radio-group v-model="formInfo.baseInfo.is_recommend">
                <el-radio label="100">是</el-radio>
                <el-radio label="110">不是</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-col>
        <el-col :span="8">
             <el-form-item label="特价商品：">
                <el-radio-group v-model="formInfo.baseInfo.is_bargain">
                <el-radio label="100">是</el-radio>
                <el-radio label="110">不是</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
 <script>

import Treeselect from "@riophae/vue-treeselect";//多选组件
import "@riophae/vue-treeselect/dist/vue-treeselect.css";//import the styles

export default {
  props: ["formInfo","listInfo"],
  components: {
        Treeselect
  },
  data() {
    return {
      normalizer(node) {
        //转换分类树状信息列的格式
        //去掉children=[]的children属性
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.title,
          children: node.children,
        };
      },
      //验证对象，由Rules结尾
      formInfoRules: {
        name: [
          {
            required: true,
            min: 1,
            max: 50,
            message: "商品名称不能为空，最大长度为50",
            trigger: "blur"
          }
        ],
        goods_no: [
          {
            required: true,
            min: 1,
            max: 20,
            message: "商品货号不能为空，最大长度为20",
            trigger: "blur"
          }
        ],
      }
    };
  },
  computed: {},
  created() {},
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
      //初始化
      this.initData();
  },
  methods: {　
      //初始化
      initData(){
       
      },
      //验证数据
      validateForm(){
        let flag = null;
        this.$refs['editModel'].validate(valid => {
          if (valid) {
            flag = true;
          } else {
            flag = false;
          }
        })
        return flag;
      }
  },
};
</script>